<template>
  <div
    :class="['mx-auto my-2', vertical ? 'w-[1px] h-2/3 my-auto mx-2' : 'w-2/3 h-[1px]']"
    :style="gradientStyle"
  ></div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  vertical: {
    type: Boolean,
    default: false,
  },
})

const gradientStyle = computed(() => ({
  background: `linear-gradient(
    to ${props.vertical ? 'bottom' : 'right'},
    transparent,
    rgba(255,255,255,0.5),
    transparent
  )`,
}))
</script>
